function App() {
  const getInnerHtml = (text) => {
    return {
      __html: `<span>${text}</span>`,
    };
  };

  const MyComponent = ({ as, children, ...rest }) => { 
    const Component = as || "span";
  
    return <Component {...rest}>{children}</Component>;
  };

  return (
    <div className="App">
      <div>123</div>
      <p dangerouslySetInnerHTML={getInnerHtml("abc")}></p>
      <MyComponent as="h1">123</MyComponent>
      <MyComponent as="a" href="https://www.baidu.com/" target="_blank">
        <h1>baidu</h1>
      </MyComponent>
    </div>
  );
}

export default App;
